微信小程序使用起来感觉像写h5一样,对于新手估计会有比较多疑惑,如果撇去这些想法应该是很快就能上手的一套开发方案。
但是它自身的限制也比较大,如不提供window对象会导致一些功能实现起来比较麻烦。我这次开发的小程序就遇到了,虽然比较快找到解决办法(可能都是比较标准化的东西),希望之后不会有其他大坑。
需要其实比较简单,就是两页文章列表及文章详情页,刚上手却遇到下面的坑:
无法利用window对象解析xml
不支持HTML标签的使用
怎样兼容Promise和generator异步
刚开始一脸懵逼...后来赶紧去github看看各大牛例子及一些工具就解决了。
解析xml问题
由于比较多的解析插件都是基于window.DOMParser
处理的,在小程序却无用武之地。找到问题就好解决,我要的是DOMParser
而不是window找找应该有代替品,然后找到这个xmldom
引入代替掉DOMParser
就解决,然后把xml转成json处理了。
评论有问道如何改,这里我已经把这个整合到这库了。
解析html问题
现在比较成熟的是wxParse
这货,的确大部分的html标签均能解析渲染,但是我这边程序录入的富文本内容却掺杂了些奇奇怪怪的标签,解析时还是会出错,内容解析到一半就停了...既然它做不到忽略,咋整?那把那些垃圾都过滤掉吧!!!马上用上js-xss
这个来处理问题,能控制过滤的标签及标签能拥有的属性,方便得很。
const xss = require('../lib/js-xss/xss')
const WxParse = require('../../lib/wxParse/wxParse.js')
//把style及class添加到白名单。
Object.keys(xss.whiteList).forEach(name => xss.whiteList[name] = xss.whiteList[name].concat(['style', 'class']))
let content = xss('<div>HTML文本</div>', Object.assign(xss.whiteList, {
/**在这添加你的标签白名单**/
//div: ['style', 'css', 'title']
}))
WxParse.wxParse('wxml', 'html', content, this, 15)
经过上面的代码便能解析出合理的html好让wxParse
好好渲染了。
你说引用js-xss
文件,对象是个方法都没有,出错了?恩,这里由于dist目录下的xss.js
文件并不是UMD包裹所以导致引用出错,这里得把整个js-xss
项目下载下来并使用browerify
重新打包。
browerify lib/index.js > dist/xss.js -s xss
兼容Promise和Generator问题
Promise使用es6-promise
打个补丁或者用bluebird
//引入
const Promise = require('../../lib/es6-promise/es6-promise').Promise;
// 或
const Promise = require('../../lib/bluebird/bluebird');
Generator需要regeneratorRuntime
,运行环境如果不加上就提示出错。
var Promise = require('../../lib/es6-promise/es6-promise').Promise;
var co = require('../../lib/co/we-index');
var regeneratorRuntime = require("../../lib/regenerator-runtime/runtime");
//获取应用实例
var app = getApp();
Page({
onReady: function () {
//console.log('onReady');
var that = this;
var gen = function* () {
var a = Promise.resolve(1);
var b = Promise.resolve(2);
var c = Promise.resolve(3);
var res = yield [a, b, c];
console.log(res); // 输出:[1, 2, 3]
};
co(gen).then(function () {
console.log('Generator函数执行完毕了'); // 输出:Generator函数执行完毕了
});
}
});
部分引用的库需要稍微改动才能在微信小程序环境使用,想马上上手可直接使用GyWxappCases 微信小程序案例下的库
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。